<template>
  <div>
    <!-- 面包屑区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <!-- 添加分类 -->
      <el-row>
        <el-col>
          <el-button type="primary" @click="addCate">添加分类</el-button>
        </el-col>
      </el-row>
      <!-- 表格区域 -->
      <tree-table :data="cateList" :columns="columns"
      :selection-type="false" :expand-type="false"
      show-index index-text="#"
      :show-row-hover="false"
      class="treeTable">
      <!-- 自定义模板：是否有效列 -->
      <template slot="isok" slot-scope="scope">
        <i class="el-icon-success" style="color:lightgreen" v-if="scope.row.cat_deleted === false"></i>
        <i class="el-icon-error" style="color:red" v-else></i>
      </template>
      <!-- 排序模板 -->
      <template slot-scope="scope" slot="order">
        <el-tag v-if="scope.row.cat_level === 0" size="mini">一级</el-tag>
        <el-tag type="success" v-else-if="scope.row.cat_level === 1" size="mini">二级</el-tag>
        <el-tag type="warning" v-else size="mini">三级</el-tag>
      </template>
      <!-- 操作模板 -->
      <template slot="opt">
        <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
      </template>
      </tree-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="catesTatal"
        >
      </el-pagination>
    </el-card>
    <!-- 添加分类弹框 -->
    <el-dialog
      title="添加分类"
      :visible.sync="addCateDialogVisible"
      width="50%"
      @close="addFormDialogClosed">
      <!-- 表单内容区域 -->
      <el-form :model="addCateForm" :rules="addCateRules" ref="addCateRef" label-width="100px">
        <el-form-item label="添加分类:" prop="cat_name">
          <el-input v-model="addCateForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类:">
        <!-- 级联选择器 -->
        <!-- c1:v-model:选中的key，options：数据源 ，props：数据源配置属性-->
          <el-cascader
            ref="cascaderRef"
            v-model="selectedKeys"
            :options="parentCateList"
            :props="cascaderProps"
            @change="parentCateChange"
            clearable
            >
          </el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAddCate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// a:调用接口获取商品分类数据
// b:调用接口获取父级分类列表的数据
// c:级联选择器显示父级分类
// d:获取添加分类需要的参数
// e:监听关闭添加分类对话框，重置表单数据
// f:调用添加分类接口，完成添加分类功能
export default {
  data() {
    return {
      // a3:保存请求参数信息
      queryInfo: {
        type: 3,
        pagenum: 0,
        pagesize: 5
      },
      // a5:创建分类列表
      cateList: [],
      // 定义总分类个数
      catesTatal: 0,
      // table数据
      columns: [
          {
            label: '分类名称',
            prop: 'cat_name'
          },
          // 自定义模板：是否有效
          {
            label: '是否有效',
            type: 'template',
            // 定义当前列模板名称
            template: 'isok'
          },
          // 排序
          {
            label: '排序',
            type: 'template',
            // 定义当前列模板名称
            template: 'order'
          },
          {
            label: '操作',
            type: 'template',
            template: 'opt'
          }
        ],
        // 添加分类弹框是否显示
        addCateDialogVisible: false,
        // 添加分类表单对象
        addCateForm: {
          cat_name: '',
          cat_pid: 0,
          cat_level: 0
        },
        addCateRules: {
          cat_name: [
            { required: true, message: '请输入分类名称', trigger: 'blur' }
          ]
        },
        // 父级分类列表
        parentCateList: [],
        // 选中项绑定至
        selectedKeys: [],
        // c2：级联选择器配置项
        cascaderProps: {
          value: 'cat_id',
          label: 'cat_name',
          children: 'children',
          expandTrigger: 'hover',
          // 父子级分开
          checkStrictly: true
        }
    }
  },
  created() {
    // a1：调用获取分类的方法
    this.getCateList()
  },
  methods: {
    // a2:创建获取分类的方法
    async getCateList() {
      // a4:调用接口获取分类列表
      const { data: res } = await this.$html.get('categories', {
        params: this.queryInfo
      })
      if (res.meta.status !== 200) {
        return this.$html.error('获取分类列表数据失败！')
      }
      // 获取数据成功
      this.cateList = res.data.result
      // a6：赋值总分类据个数
      this.catesTatal = res.data.total
    },
    // 监听pagesize改变
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getCateList()
    },
    // 监听当前页码的变化pagenum
    handleCurrentChange(newNum) {
      this.queryInfo.pagenum = newNum
      this.getCateList()
    },
    // 监听添加分类按钮
   addCate() {
      // b1：调用方法，完成对父级分类数据的获取
       this.getParentCate()
      this.addCateDialogVisible = true
    },

    // 获取父级分类的方法
    async getParentCate() {
      // b2:调用接口
      const { data: res } = await this.$html.get('categories', {
        params: {
        type: 2
      }
      })
      if (res.meta.status !== 200) {
        return this.$message.error('获取父级分类列表失败！')
      }
      // 获取数据成功
      this.parentCateList = res.data
    },

    // 监听父级分类变化
    parentCateChange() {
      // d1:在数据变化方法中获取分类父id和分类层级
      // d2:获取父分类id
      // 如果数组不为空，则存在父分类
      if (this.selectedKeys.length > 0) {
        this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1]
        // d3：获取分类层级
        this.addCateForm.cat_level = this.selectedKeys.length
      } else {
        this.addCateForm.cat_pid = 0
        this.addCateForm.cat_level = 0
      }
      // c3：在选中后关闭下拉框
      this.$refs.cascaderRef.dropDownVisible = false
    },
    // 监听添加分类确认按钮
    confirmAddCate () {
      // f1：对表单进行预验证
       this.$refs.addCateRef.validate(async valid => {
         if (!valid) {
           return false
         }
        // 预验证通过，调用接口
        const { data: res } = await this.$html.post('categories', this.addCateForm)
        if (res.meta.status !== 201) {
             return this.$message.error('添加分类失败！')
        }
        // 添加分类成功
        this.$message.success('添加分类成功！')
        this.getCateList()
        this.addCateDialogVisible = false
       })
    },
    // e:监听添加分类弹框关闭
    addFormDialogClosed() {
      // e1：清空表单数据
      this.$refs.addCateRef.resetFields()
      this.selectedKeys = []
      this.addCateForm.cat_pid = 0
      this.addCateForm.cat_level = 0
    }
  }
}
</script>

<style lang="less" scoped>
.treeTable {
  margin-top: 15px;
}
.el-cascader{
  width:100%
}
</style>